<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="JoinInList">
			<view class="item" v-if="user.length!=0" v-for="(item,index) in user " :key="index">
				<view class="info" @click="touser(item)" >
					<view class="icon">
						<image v-bind:src="item.avatar" class="img-bg-img" mode="aspectFill"></image>
						<view class="sex">
							
							<image v-if="item.gender==2" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%203404.png"></image>
							<image v-if="item.gender==1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%94%B7.png"></image>
						</view>
					</view>
					<view class="detailed">
						<view class="name">{{item.nickname}}</view>
						<view class="desc" >{{item.ipProvince?'item.ipProvince':''}}24岁 · 年薪10-20W</view>
					</view>
				</view>
				<view class="btn" v-if="!item.relationFlag" @click="concernUser(item.relationFlag, item.toUid, index)">已关注</view>
				<view class="btn" v-else  @click="concernUser(item.relationFlag, item.toUid, index)">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%205034.png"></image>
				</view>
			</view>
			<view v-if="user.length==0 && loaded" style="width: 100%; margin-top: 24rpx;">
				<text class="position-relative d-flex font-bold font30" style="justify-content: center;align-items: center;top: 405rpx;">您暂时还没有关注任何人</text>
				<image class="position-relative" style="top: -73rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	import { USER_TOKEN } from '@/constants/local-storage-key-const';
	let token = uni.getStorageSync(USER_TOKEN);
	export default {
		data() {
			return {
				title: '关注',
				param:{		
					type:"2",
					pageIndex:1,
					pageSize:9
				},
				isLastPage: false,
				loaded: false,
				user:[]//传过来的用户
			}
		},
		components:{TitleBarVue},
		onReachBottom() {
			if (!this.isLastPage) {
			   // 不是最后一页，可以继续加载
			   this.param.pageIndex += 1; // 页码增加
			   this.Relation();
			}
		},
		onShow() {
			this.param.pageIndex = 1
			this.user=[];
			this.Relation();
		},
		methods: {
			async Relation(){
				this.loaded = false
				let res = await userApi.getRelation(this.param);
				if (res.records.length < this.param.pageSize) {
				    this.isLastPage = true;
				}
				this.loaded = true
				const start = this.user.length;
				this.user.splice(start, 0, ...res.records);
			},
			touser(i){
				let uid=i.toUid;
				if(uid==this.$store.state.user.uid){
					return
				}
				uni.navigateTo({
				    url: `/pagesMain/HomePage/HomePage?id=${uid}`
				});
			},
			async concern(params, dex) {
				let res = await userApi.relation(params);
				this.user.splice(dex,1)
				this.deleteFriend(params.toUid)
			},
			// 删除好友
			deleteFriend(uid) {
				let that = this
				let userIDList = []
				userIDList.push(uid)
				let promise = that.$tim.deleteFriend({
					userIDList: userIDList,
					type: 'Delete_Type_Both'
				});
				promise.then(function(imResponse) {
					const { successUserIDList, failureUserIDList } = imResponse.data;
					// 删除成功的 userIDList
					successUserIDList.forEach((item) => {
						const { userID } = item;
					});
					// 删除失败的 userIDList
					failureUserIDList.forEach((item) => {
						const { userID, code, message } = item;
					});
					// 如果好友列表有变化，则 SDK 会触发 TencentCloudChat.EVENT.FRIEND_LIST_UPDATED 事件
				}).catch(function(imError) {
					console.warn('removeFromFriendList error:', imError);
				});
			},
			// 关注、取关
			checkRealNaem(){//判断是否实名
				// if(this.$store.state.user.realName==''||this.$store.state.user.realName==null){
				// 	return false					
				// }else{	
				// 	return true
				// }
				return true
			},
			concernUser(relationFlag, toUid, dex){
				if(this.checkRealNaem()){
				let params = {
					bindFlag: 0,
					fromUid: this.$store.state.user.uid,
					toUid: toUid,
					type: 2
				}
				uni.showModal({
					content: '确定不再关注此人？',
					success: (res) => {
						if (res.confirm) {
							this.concern(params,dex)
						}
					}
				});
				}else{
					uni.showModal({
					  
					  content: '你还没有完成实名认证，请先完成实名认证？',
					  confirmText: '去实名',
					  success: (res) => {
					    if (res.confirm) {  
					     uni.navigateTo({
					         url: `/pagesApp/RealName/RealName`
					     });
					    } else if (res.cancel) {
												 
					      // console.log('用户点击取消');
					      // 不执行任何操作，用户取消退出
					    }
					  }
					});
					
					
					
				}	
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.content {
		width: 100%;
		background-color: #fff !important;
	}
	.JoinInList {
		width: 730rpx;
		margin: 200rpx auto 0;
		border-radius: 50rpx;
		background-color: #fff;
		overflow: hidden;
		padding-bottom: 10rpx;
		.item {
			width: 700rpx;
			height: 150rpx;
			margin: 30rpx auto;
			background-color: #f5f5f5;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.info {
				display: flex;
				margin-left: 20rpx;
				.icon {
					margin-right: 10rpx;
					position: relative;
					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}
					.sex {
						position: absolute;
						bottom: 7rpx;
						right: 0rpx;
						
						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
				.detailed {
					display: flex;
					flex-direction: column;
					justify-content: center;
					.name {
						margin: 10rpx 0 4rpx;
						color: #231815;
						font-weight: 700;
						font-size: 30rpx;
					}
					.desc {
						color: #595757;
						font-size: 22rpx;
					}
				}
			}
			.btn {
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				color: #fff;
				margin-right: 50rpx;
				background: linear-gradient( 90deg, #ED65CE 0%, #E966CF 2%, #859BF0 69%, #5DB0FE 99%);
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 21.23rpx;
					height: 20.16rpx;
				}
			}
		}
	}
}
.title {
	display: flex;
	align-items: center;
	font-weight: 700;
	height: 80rpx;
	.goback {
		image {
			margin-left: 50rpx;
			width: 20rpx;
			height: 30rpx;
		}
	}
	text {
		flex: 1;
		margin-right: 50rpx;
		font-size: 34rpx;
		text-align: center;
	}
}
.pt-300 {
	padding-top: 300rpx;
}
</style>
